<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .input-group {
            margin-top: 10px;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <!--
        action: 数据提交的地址 => 一般是后端接口

        以get方式提交数据时,将参数数据队列拼接到url之后 以?分隔 
        user=a123123&pwd=123123&phone=17386141516&email=1272071496%40qq.com

        以post方式提交数据时, 利用http post机制 将数据携带在请求主体(body)中,在头信息中传递  (后面讲) 

      -->
    <form action="https://www.baidu.com" method="get">
        <div class="input-group">
            <labal>用户名:</labal>
            <!-- user=a123123 -->
            <input type="text" class="user" name="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <labal>密&emsp;码:</labal>
            <input type="password" class="pwd" name="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <labal>手机号:</labal>
            <input type="text" class="phone" name="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <labal>邮&emsp;箱:</labal>
            <input type="text" class="email" name="email">
            <span class="email_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="submit" value="注册">
            <input type="reset" class="reset" value="取消">
        </div>
    </form>
</body>

<script>
    // ajax产生的背景
    // 传统的数据提交方式 借助表单提交 => 往往伴随着页面跳转  => 用户体验不好  => 有没有什么方法在页面不跳转的同时将数据传递给后端 ,并获取后端的响应数据

    // ### AJAX解决的问题：
    // 指不刷新当前页面，把某些数据传递给服务器，把对应的数据从服务器拿回客户端。

    // Ajax
    // 是指一种创建交互式网页应用的网页开发技术。
    // - AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）
    // - 交互：这里的交互指客户端和服务器的数据是可以相互传递和使用的。
    // - XML：一种类似于HTML的标记语言，可以将数据结构化，XML已经被JSON淘汰了。
    // - 异步：异步指程序可以同时执行，同步指程序需要按照顺序执行。

    // 特征:
    // 指不刷新当前页面，把某些数据传递给服务器，把对应的数据从服务器拿回客户端。 => 在不提交整个页面的情况下,实现页面的局部刷新;

    // 注意:
    // 1. ajax也要依赖服务器环境  => Vscode -> live Server, HbilderX  => 在本地起一个假服务(只能做前端页面展示 -> 没有后端和数据库)
    // 2. ajax也可以请求同服务器下的文本文件  => 返回文件的内容(文本内容)


</script>

</html>